<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- <name></name> -->
    <!-- <name></name> -->
    <blog-title v-for="item in article" :item="item" :num="count" @count-add='count+=1'>
      <h3>
        <span>1212</span>
        {{name}}
      </h3>
      <name>aaaaaa</name>
    </blog-title>
    <!-- <ar-content v-bind="item" v-for="item in content"></ar-content> -->
    <!-- <model-demo v-model="msg"></model-demo> -->
    <!-- <h3>{{msg}}</h3> -->
  </div>


  <script>
    Vue.component('name', {
      data: function () {
        return {
          count: 1
        }

      },
      template: '<button @click="count+=1">{{count}}</button><solt></slot>'
    })

    Vue.component('blog-title', {
      props: ['item', 'num'],
      template:
        `
      <div>
        <h3>{{ item.title }}</h3>
        <div v-html="item.content"></div>
        <button @click="$emit('count-add')">{{num}}</button>
        <slot>{{num}}</slot>
      </div>
    `
    })

    Vue.component('ar-content', {
      props: ['title', 'writer'],
      template:
        `
      <div>
        <h3>{{ title }}</h3>
        <h2>{{writer}}</h2>
      </div>
    `
    })

    Vue.component('model-demo', {
      // model: {
      //   prop: 'value',
      //   event: 'change'
      // },
      props: {
        msg: 'string'
      },
      // template: `
      // <div>
      // <input type="text" :value="msg" @change="$emit('change',$event.target.value)"></input>
      // </div>
      // `
      template: `
      <div>
      <input type="text" :value="msg" @input="$emit('input',$event.target.value)"></input>
      </div>
      `
    });

    var vm = new Vue({
      el: '#app',
      data: {
        article: [
          { title: '111', content: 'xxxxxxxxx' },
          { title: '222', content: 'xxxxxxxxx' },
          { title: '333', content: 'xxxxxxxxx' }
        ],
        count: 0,
        name: 'name',
        content: [
          { title: '111', witer: 'w' },
          { title: '222', witer: 'ww' },
          { title: '333', witer: 'www' }
        ],
        msg: null
      }
    })
  </script>

</body>

</html>